<script setup lang="ts">
import PreviousChiGroup from '@/components/tiles/previous/group/PreviousChiGroup.vue'
import PreviousPengGroup from '@/components/tiles/previous/group/PreviousPengGroup.vue'
import PreviousMingGangGroup from '@/components/tiles/previous/group/PreviousMingGangGroup.vue'
import PreviousAnGangGroup from '@/components/tiles/previous/group/PreviousAnGangGroup.vue'

import { onMounted, watchEffect , ref} from 'vue'
const props = defineProps({
  // 牌组
  groups: {type: Array, required: false, default: []}
})
let groupsCount = ref(0);
let groupTransformStyleArr = ref(new Array<string>());

function loadStyles() {
  let tempTranslateX = 0; 
  let tempTranslateY = 0;
  groupsCount.value = props.groups.length;
  for (var i=0; i<groupsCount.value; i++) {
    let group = props.groups[i];
    if (i == 0) {
      groupTransformStyleArr.value[i] = "translateY(0px)" + " translateX(0px)";
    } else {
      // 暗杠与明杠的x-y轴规则特殊处理
      if ((group as any).type == "AN_GANG" || (group as any).type == "MING_GANG") {
        tempTranslateX = tempTranslateX + 37;
        tempTranslateY = tempTranslateY + 150;
      } else {
        tempTranslateX = tempTranslateX + 28;
        tempTranslateY = tempTranslateY + 110;
      }
      groupTransformStyleArr.value[i] = "translateY(" + tempTranslateY+ "px)" + " translateX(" + tempTranslateX +"px)" ;
    }
  }
}

onMounted(() => {
  loadStyles();
})
watchEffect(() => {
  loadStyles();
})
</script>

<template>
  <div class="previous-owned-tiles-groups">
    <template v-for="(value, index) in props.groups">
      <template v-if="(value as any).type == 'CHI'" >
          <PreviousChiGroup :tiles="(value as any).tiles" :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': groupsCount-index}"></PreviousChiGroup>
      </template>
      <template v-else-if="(value as any).type == 'PENG'">
          <PreviousPengGroup :tile="(value as any).tiles[0]"  :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': groupsCount-index}"></PreviousPengGroup>
      </template>
      <template v-else-if="(value as any).type == 'MING_GANG'">
          <PreviousMingGangGroup :tile="(value as any).tiles[0]" :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': groupsCount-index}"></PreviousMingGangGroup>
      </template>
      <template v-else-if="(value as any).type == 'AN_GANG'">
          <PreviousAnGangGroup :transformStyle="groupTransformStyleArr[index]" :style="{'z-index': groupsCount-index}"></PreviousAnGangGroup>
      </template>
    </template>
  </div>
</template>

<style scoped lang="scss">
.previous-owned-tiles-groups{
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}
</style>
